<template>
  <div id="wrapper">
    <el-header>
      <my-header class="my_header"></my-header>
    </el-header>
    <div class="box-bottom">
      <router-view></router-view>
    </div>
    <directory-box v-if="isShow"></directory-box>
  </div>
</template>

<script>
import MyHeader from "./Home/components/MyHeader"
import DirectoryBox from "./Home/components/DirectoryBox"
import Index from "./Home/Index"
export default {
  name: "landing-page",
  data() {
    return {
      isShow: false,
    }
  },
  components: {
    MyHeader,
    DirectoryBox,
    Index,
  },
  created() {
    this.$store.dispatch("updateState") // 初始化播放器的状态(更改为暂停状态)
    // 打开文件夹选择目录(在LocalMusic页面触发)
    this.$EventBus.$on("showDirectory", () => {
      this.isShow = !this.isShow
    })
  },
  mounted() {
    var box = document.getElementById("el_main")
    this.$EventBus.$on("scrollTo", (num) => {
      box.scrollTop = num
    })
  },
  methods: {
    open(link) {
      this.$electron.shell.openExternal(link)
    },
  },
}
</script>

<style lang="scss" scoped>
#wrapper {
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  width: 100%;
}
.el-header {
  width: 100%;
  line-height: 60px;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.box-bottom {
  width: 100%;
  height: calc(100% - 60px);
}
</style>
